<template>
  <el-drawer
    v-loading="infoLoading"
    :title="info.title"
    :visible.sync="dVisible"
    size="70%"
    :open="open"
    :before-close="handleClose">
    <el-card style="margin: 0 20px 0 20px">
      <el-row>
        <el-col :span="2">
          <svg-icon name="international" style="font-size: 3rem;" />
        </el-col>
        <el-col :span="22">
          <div class="head-item">网址: {{ info.domain }}</div>
          <div class="head-item">来源: 全球搜索</div>
          <div v-if="info.details && info.details.phones" class="head-item">联系电话:
            <span v-for="(phone, index) in info.details.phones.split(',')" :key="index" style="margin-right: 10px">
              <template v-if="index < 5">
                <el-link icon="el-icon-mobile-phone"  @click="handleClipboard(phone, $event)">{{ phone }}</el-link>
              </template>
            </span>
          </div>
          <div v-if="info.details && info.details.company_email" class="head-item">邮箱:
            <span v-for="(email, index) in info.details.company_email.split(',')" :key="index" style="margin-right: 10px">
              <template v-if="index < 5">
                <el-link icon="el-icon-message"  @click="handleClipboard(email, $event)">{{ email }}</el-link>
              </template>
            </span>
          </div>
          <div v-if="info.details" class="social-account">社交帐号:
            <span v-if="info.details.facebook_url">
              <svg-icon name="facebook" style="font-size: 1.3rem;" original/>
              <el-link icon="facebook" target="_blank" :href="info.details.facebook_url" v-html="info.details.facebook_username"></el-link>
            </span>
            <span v-if="info.details.twitter_url">
                <svg-icon name="twitter" style="font-size: 1.3rem;" original/>
              <el-link target="_blank" :href="info.details.twitter_url">{{ info.details.twitter_username }}</el-link>
            </span>
            <span v-if="info.details.google_plus_url">
                <svg-icon name="google-plus" style="font-size: 1.3rem;" original/>
              <el-link target="_blank" :href="info.details.google_plus_url">{{ info.details.google_plus_username }}</el-link>
            </span>
            <span v-if="info.details.youtube_url">
                <svg-icon name="youtube" style="font-size: 1.3rem;" original/>
              <el-link target="_blank" :href="info.details.youtube_url">{{ info.details.youtube_username }}</el-link>
            </span>
            <span v-if="info.details.instagram_url">
                <svg-icon name="instagram" style="font-size: 1.3rem;" color="#f54832 #fff"/>
              <el-link target="_blank" :href="info.details.instagram_url">{{ info.details.instagram_username }}</el-link>
            </span>
            <span v-if="info.details.linkedin_url">
                <svg-icon name="linkedin" style="font-size: 1.3rem;" original/>
              <el-link target="_blank" :href="info.details.linkedin_url">{{ info.details.linkedin_username }}</el-link>
            </span>
            <span v-if="info.details.github_url">
                <svg-icon name="github" style="font-size: 1.3rem;" original/>
              <el-link target="_blank" :href="info.details.github_url">{{ info.details.github_username }}</el-link>
            </span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-tabs v-model="activeName" style="padding: 20px">
      <el-tab-pane label="联系人" name="contact">
        <el-row>
          <el-col>
            <el-button>禁用邮箱</el-button>
          </el-col>
        </el-row>
        <el-table :data="employees" height="60vh">
          <el-table-column type="selection" align="center" />
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="{$index}">
              {{ $index+1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="名称" min-width="200">
            <template slot-scope="{row}">
              {{ row.first_name }} {{ row.last_name }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="公司名称" min-width="150">
            <template slot-scope="{row}">
              {{ row.company_name }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="职位" prop="job_title" min-width="200" />
          <el-table-column label="邮箱" prop="business_email" min-width="200">
            <template slot-scope="{row}">
              <div @click="handleClipboard(row.business_email, $event)" style="cursor: pointer">
                <svg-icon name="clipboard" />
                {{row.business_email}}
              </div>
              <div v-if="row.personal_email" @click="handleClipboard(row.personal_email, $event)" style="cursor: pointer">
                <svg-icon name="clipboard" />
                {{row.personal_email}}
              </div>
            </template>
          </el-table-column>
<!--          <el-table-column align="center" label="更新时间" prop="updatedAt" min-width="150" />-->
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<style scoped>
.el-input::v-deep .el-input-group__prepend {
  padding: 0;
  width: 200px;
  border:unset;
}

.el-cascader::v-deep .e-input{
  margin-top:-1px;
}

/* .el-input::v-deep .el-input-group__prepend >div.el-cascader.el-cascader--medium.el-cascader >div.el-input.el-input--medium.el-input--suffix > .el-input__inner{ */
  /* border-right: unset; */
/* } */
.head-item {
  padding: 5px 0 5px 0;
}

.social-account span {
  margin-right: 10px;
}

</style>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { getAction, getLongTimeAction } from '@/api/common'
import { handleClipboard } from '@/utils/clipboard'

@Component
export default class extends Vue {
  @Prop({ required: true }) private show!:boolean
  @Prop({ required: true }) private id!:number

  @Watch('show')
  watchShow(val: boolean) {
    this.dVisible = val
    if (val) {
      this.open()
    }
  }

  private handleClipboard = handleClipboard
  private nation = ''
  private dVisible = false
  private infoLoading = false

  private keywords = ''
  private info : any = {}
  private activeName = 'contact'
  private employees : any[] = []

  destroy() {
    this.handleClose()
  }

  open() {
    this.fetchData()
  }

  fetchData() {
    this.infoLoading = true
    getLongTimeAction({}, 'globalSearch/' + this.id).then(res => {
      this.info = res.data.info
      this.employees = this.info.employees
    }).finally(() => {
      this.infoLoading = false
    })
  }

  handleClose() {
    this.$emit('update:show', false)
  }
}
</script>
